<template>
  <div>
    <div class="title">
      我收藏的酒店&nbsp;&nbsp;&nbsp;({{totalSize}})
    </div>
    <div v-if="saveSceneList.length > 0">
      <div v-for="(value, index) in saveSceneList" :key="index" class="sceneListIndex">
        <Img class="imgEach" :imgSrc="value.avatar" :contentTitle="value.name" :contentContent="value.content"
             :titlePosition="'down'"
             :isSave="true"
             :id="value.businessId"
             @saveClick="saveClick"
             :border="false"/>
      </div>
      <div class="clearFix"/>
      <pagination
        :totalSize="totalSize"
        :pageSize="pageSize"
        :nowtIndex="currentIndex"
        :isRequested="isRequested"
        @pageSizeClick="pageSizeClick"
      />
    </div>
    <div v-else>
      酒店为空
    </div>
  </div>
</template>

<script>
  import Img from '@/components/common/img.vue'
  import pagination from '@/components/common/pagination.vue'

  export default {
    name: "saveHotel",
    inject: ['reload'],
    beforeCreate() {
      this.$axios({
        url: this.api.saveList,
        params: {
          index: 1,
          size: this.pageSize,
          type: 2
        },
        method: 'get'
      }).then(res => {
        if (res.state === 0) {
          this.saveSceneList = res.data.records
          this.totalSize = res.data.total
          this.currentIndex = res.data.current
          this.isRequested = true
        }
      })
    },
    data() {
      return {
        saveSceneList: [],
        currentIndex: 0,
        pageSize: 6,
        totalSize: 0,
        isRequested: false,
      }
    },
    methods: {
      pageSizeClick(index) {
        this.$axios({
          url: this.api.saveList,
          params: {
            index: index,
            size: this.pageSize,
            type: 2
          },
          method: 'get'
        }).then(res => {
          if (res.state === 0) {
            this.saveSceneList = res.data.records
          }
        })
      },
      saveClick(id, isSave) {
        let post = {}
        post['hotelId'] = id
        if (isSave) {
          post['type'] = 2
        } else {
          post['type'] = 1
        }
        this.$axios({
          url: this.api.saveHotel,
          params: post,
          method: 'post'
        }).then(res => {
          if (res.state !== 0) {
            alert(res.msg)
          } else {
            this.reload()
          }
        })
      }
    },
    components: {
      Img,
      pagination
    }
  }
</script>

<style scoped>
  .title {
    text-align: left;
    margin: 28px 0 50px 115px;
  }

  .sceneListIndex {
    float: left;
    margin: 10px;
  }
</style>
